/**
* 意见反馈
*/
import React, { Component } from 'react';
import { View, StyleSheet, Text, Image, TouchableOpacity, FlatList, TextInput, ScrollView } from "react-native";
import { connect } from 'react-redux';
import { create_service } from '../../redux/index.js';
import { Contract } from '../../service/index.js';
import { Colors, Dimens, ImageRes } from '../../utils/Assets';
import { ProgressView } from '../custom/index'
import { Actions } from 'react-native-router-flux';
import { getStore } from '../../redux/index.js';
import Toast from 'react-native-root-toast';
class PersonalFeedbackView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            reason: ''
        }
        this.resonArr = [
            { reason: '闪退', isSel: false },
            { reason: '卡顿', isSel: false },
            { reason: '黑屏/白屏', isSel: false },
            { reason: '死机', isSel: false },
            { reason: '界面显示异常', isSel: false },
            { reason: '其他', isSel: false }
        ]
        this.userInfo = getStore().getState().auth.userInfo
    }

    componentDidMount() {

    }
    componentWillUnmount() {
    }
    submit() {
        if (!this.title) {
            Toast.show('请选择遇到的问题', { position: Toast.positions.CENTER })
            return
        }
        if (!this.content) {
            Toast.show('请选择遇到的问题内容', { position: Toast.positions.CENTER })
            return
        }
        let params = {
            token: this.userInfo.token,
            title: this.title,
            content: this.content
        }
        if (this.contact) {
            params.contact = this.contact
        }
        this.setState({ loading: true })
        this.props.dispatch(create_service(Contract.POST_USER_FEEDBACK, params)).then((res) => {
            if (res) {
                Toast.show('提取成功', { position: Toast.positions.CENTER })
                Actions.pop()
            }
            this.setState({ loading: false })
        })
    }
    render() {
        return (
            <View style={styles.container}>
                <ScrollView style={{ flex: 1 }} showsVerticalScrollIndicator={false}>
                    <Text style={{ fontSize: 13, color: "#999999", margin: 15 }}>请选择你在闪退，卡顿或界面异常中遇到的问题</Text>
                    <View style={{ backgroundColor: "#ffffff" }}>
                        {this.resonArr.map((value, index) => {
                            return (
                                <TouchableOpacity style={{ flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 20, paddingHorizontal: 15 }} activeOpacity={0.8} onPress={() => {
                                    for (let i = 0; i < this.resonArr.length; i++) {
                                        this.resonArr[i].isSel = i == index
                                        if (this.resonArr[i].isSel) {
                                            this.title = this.resonArr[i].reason
                                        }
                                    }
                                    this.setState({ loading: false })
                                }} key={index}>
                                    <Text style={{ fontSize: 16, color: "#333333", alignSelf: 'center' }}>{value.reason}</Text>
                                    {value.isSel && <Image style={{ width: 20, height: 15, alignSelf: 'center' }} source={ImageRes.personal_select}></Image>}
                                </TouchableOpacity>
                            )
                        })}
                    </View>
                    <View style={{ backgroundColor: "#ffffff", marginTop: 15, padding: 15 }}>
                        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                            <Text style={{ fontSize: 16, color: "#333333", alignSelf: 'center', fontWeight: 'bold' }}>问题/意见描述</Text>
                            <Text style={{ fontSize: 16, color: "#333333", alignSelf: 'center', fontWeight: 'bold' }}>{this.state.reason.length + '/150'}</Text>
                        </View>
                        <TextInput style={{ fontSize: 16, color: '#333333', height: 200, width: Dimens.DeviceWidth - 30, marginTop: 15, lineHeight: 24 }}
                            onChangeText={(text) => {
                                this.content = text
                            }}
                            placeholderTextColor={'#999999'}
                            multiline={true}
                            maxLength={150}
                            underlineColorAndroid={'transparent'}
                            placeholder={'请填写10字以上的问题描述，以便我们更好的帮助您解决问题'}
                        />
                    </View>
                    <View style={{ backgroundColor: "#ffffff", marginTop: 15, padding: 15 }}>
                        <Text style={{ fontSize: 16, color: "#333333", fontWeight: 'bold' }}>联系方式 （选填）</Text>
                        <TextInput style={{ fontSize: 16, color: '#333333', height: 40, width: Dimens.DeviceWidth - 30 }}
                            onChangeText={(text) => {
                                this.contact = text
                            }}
                            keyboardType={'number-pad'}
                            maxLength={11}
                            placeholderTextColor={'#999999'}
                            underlineColorAndroid={'transparent'}
                            placeholder={'填写你的手机号码，便于我们与你联系'}
                        />
                    </View>
                    <TouchableOpacity style={{ marginVertical: 30, backgroundColor: '#378EFB', justifyContent: 'center', marginHorizontal: 15, paddingVertical: 15, borderRadius: 5 }} activeOpacity={0.8} onPress={() => {
                        this.submit()
                    }}>
                        <Text style={{ fontSize: 15, color: "#ffffff", alignSelf: 'center' }}>提交</Text>
                    </TouchableOpacity>
                </ScrollView>
                <ProgressView show={this.state.loading} />
            </View >
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Colors.bg_color,
    }
});
const ExportView = connect()(PersonalFeedbackView);
module.exports.PersonalFeedbackView = ExportView
